<template>
	<view>
		<view class="wanl-poster">
			<canvas v-if="!tempFilePath" :canvas-id="canvasID" class="wanl-poster__canvas" :style="{ width: canvasW + 'px', height: canvasH + 'px', top: 0 }" />
			<view v-else class="wanl-poster__main">
				<view @tap.stop="">
					<image lazy-load class="image" :src="tempFilePath" mode="widthFix" @longpress="toSave(tempFilePath)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var that;
import { mapState } from 'vuex';
export default {
	name: 'wanl-poster',
	props: {
		canvasID: {
			Type: String,
			default: 'PosterCanvas'
		},
		img: {
			Type: String,
			default: ''
		},
		price: {
			Type: String,
			default: ''
		},
		marketPrice: {
			Type: String,
			default: ''
		},
		title: {
			Type: String,
			default: ''
		},
		page: {
			Type: String,
			default: ''
		},
		scene: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			config: {},
			loading: false,
			lineType: true,
			mpQrcodeUrl: '',
			tempFilePath: '',
			canvasW: 0,
			canvasH: 0,
			ctx: null
		};
	},
	computed: {
		...mapState(['user', 'common'])
	},
	created() {
		uni.showLoading({
			title: '海报生成中...'
		});
		that = this;
		that.OnCanvas();
	},
	methods: {
		async OnCanvas() {
			that.loading = true;
			that.ctx = uni.createCanvasContext(that.canvasID, this);
			const canvasWidth = uni.upx2px(that.common.appConfig.poster_width),
				//canvas Paddng 间距
				margin = uni.upx2px(25),
				//二维码或太阳码宽高
				qrcodeWidth = uni.upx2px(150);
			//文本宽度
			let _strlineW = 0;
			//网络主图
			let _imgInfo = await that.getImageInfo({
				img: that.img ? that.$wanlshop.oss(that.img, 400, 0) : that.$wanlshop.oss(that.common.appConfig.poster_image, 400, 0)
			});

			let r = [_imgInfo.width, _imgInfo.height];
			let imgW = canvasWidth - margin * 2;
			if (r[0] != imgW) {
				r[1] = Math.floor((imgW / r[0]) * r[1]);
				r[0] = imgW;
			}
			that.canvasW = canvasWidth;

			// 是否存在价格行
			// #ifdef MP
			if (that.price != '') {
				that.canvasH = r[1] + qrcodeWidth + 120;
			} else {
				that.canvasH = r[1] + qrcodeWidth + 85;
			}
			// #endif
			// #ifndef MP
			if (that.price != '') {
				that.canvasH = r[1] + qrcodeWidth + 114;
			} else {
				that.canvasH = r[1] + qrcodeWidth + 80;
			}
			// #endif

			//canvas背景颜色
			that.ctx.setFillStyle(that.common.appConfig.poster_background);
			//canvas画布大小
			that.ctx.fillRect(0, 0, that.canvasW, that.canvasH);

			//添加图片展示
			that.ctx.drawImage(_imgInfo.path, margin, margin, r[0], r[1]);
			//添加图片展示 end

			//设置文本
			that.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
			that.ctx.setFillStyle(that.common.appConfig.poster_title_color); //设置标题文本颜色
			let _strLastIndex = 0; //每次开始截取的字符串的索引
			let _strHeight = r[1] + margin * 2 + 15; //绘制字体距离canvas顶部的初始高度
			let _num = 1;
			let title = that.title ? that.title : that.common.appConfig.poster_title;
			for (let i = 0; i < title.length; i++) {
				_strlineW += that.ctx.measureText(title[i]).width;
				if (_strlineW > r[0]) {
					if (_num == 2 && that.lineType) {
						//文字换行数量大于二进行省略号处理
						that.ctx.fillText(title.substring(_strLastIndex, i - 2) + '...', margin, _strHeight);
						_strlineW = 0;
						_strLastIndex = i;
						_num++;
						break;
					} else {
						that.ctx.fillText(title.substring(_strLastIndex, i), margin, _strHeight);
						_strlineW = 0;
						_strHeight += 20;
						_strLastIndex = i;
						_num++;
					}
				} else if (i == title.length - 1) {
					that.ctx.fillText(title.substring(_strLastIndex, i + 1), margin, _strHeight);
					_strlineW = 0;
				}
			}
			//设置文本 end

			//设置价格
			if (that.price != '') {
				_strlineW = margin;

				_strHeight += uni.upx2px(60);

				if (_num == 1) {
					_strHeight += 20; //单行标题时占位符
				}
				if (that.price != '') {
					//判断是否有销售价格
					that.ctx.setFillStyle(that.common.appConfig.poster_price_color);
					that.ctx.setFontSize(uni.upx2px(38));
					that.ctx.fillText('￥' + that.price, _strlineW, _strHeight); //商品价格
					_strlineW += that.ctx.measureText('￥' + that.price).width + uni.upx2px(10);
				}
				//商品原价
				that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
				that.ctx.setFontSize(uni.upx2px(24));
				that.ctx.fillText(that.marketPrice, _strlineW, _strHeight);
				// 删除线
				that.ctx.strokeStyle = that.common.appConfig.poster_original_color;
				that.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
				that.ctx.lineTo(_strlineW + that.ctx.measureText(that.marketPrice).width, _strHeight - uni.upx2px(10)); //终点
				that.ctx.stroke();
			}
			//设置价格 end

			//添加二维码 drawImage(图片, 左边距, 上边距, 宽度, 高度);
			let _qrcodeImg = await that.getImageInfo({
				img: `${that.$wanlshop.config('appurl')}/wanlshop/common/qrcode?width=${qrcodeWidth}&page=${encodeURIComponent(
					that.page + '?' + that.$wanlshop.parseParams(JSON.parse(JSON.stringify(that.scene).replace('"i"', '"id"')))
				)}`
			});
			_strHeight += uni.upx2px(20);
			// #ifdef APP || H5 || MP-WEIXIN
			// 微信二维码
			// 展示全部二维码
			if (that.common.appConfig.poster_qrcode == '0') {
				that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth, qrcodeWidth);
				let _mpQrcodeImg = await that.getImageInfo({
					img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(
						JSON.stringify({
							page: that.page,
							scene: that.scene,
							width: qrcodeWidth,
							env: that.common.appConfig.poster_env
						})
					)}`
				});
				that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth - qrcodeWidth, _strHeight, qrcodeWidth, qrcodeWidth);
				// 展示小程序码
			} else if (that.common.appConfig.poster_qrcode == '1') {
				let _mpQrcodeImg = await that.getImageInfo({
					img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(
						JSON.stringify({
							page: that.page,
							scene: that.scene,
							width: qrcodeWidth,
							env: that.common.appConfig.poster_env
						})
					)}`
				});
				that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth, qrcodeWidth);
				// 展示普通二维码
			} else if (that.common.appConfig.poster_qrcode == '2') {
				// 生成二维码
				that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth, qrcodeWidth);
			} else {
				let _mpQrcodeImg = await that.getImageInfo({
					img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(
						JSON.stringify({
							page: that.page,
							scene: that.scene,
							width: qrcodeWidth,
							env: that.common.appConfig.poster_env
						})
					)}`
				});
				that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth, qrcodeWidth);
			}
			// #endif

			// #ifndef APP || H5 || MP-WEIXIN
			// 生成二维码
			that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth, qrcodeWidth);
			// #endif
			//添加二维码 end

			//添加推荐人与描述
			let username = that.user.isLogin ? '@' + that.user.nickname : that.common.appConfig.poster_user;
			that.ctx.setFillStyle(that.common.appConfig.poster_title_color);
			that.ctx.setFontSize(uni.upx2px(30));
			that.ctx.fillText(username, margin, _strHeight + qrcodeWidth / 2);
			that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
			that.ctx.setFontSize(uni.upx2px(24));
			that.ctx.fillText(that.common.appConfig.poster_viewDetails, margin, _strHeight + qrcodeWidth / 2 + 20);
			//添加推荐人与描述 end

			//延迟后渲染至canvas上
			setTimeout(function () {
				that.ctx.draw(true, (ret) => {
					uni.hideLoading();
					that.getNewImage();
				});
			}, 500);
		},
		async getImageInfo({ img }) {
			return new Promise((resolve, errs) => {
				uni.getImageInfo({
					src: img,
					success: function (image) {
						resolve(image);
					},
					fail(err) {
						errs(err);
						uni.showToast({
							title: '海报生成失败',
							mask: false,
							duration: 2000,
							icon: 'none'
						});
						uni.hideLoading();
					}
				});
			});
		},
		getNewImage() {
			uni.canvasToTempFilePath(
				{
					canvasId: that.canvasID,
					quality: 1,
					complete: (res) => {
						that.tempFilePath = res.tempFilePath;
						that.loading = false;
						that.$emit('success', res);
						uni.hideLoading();
					}
				},
				this
			);
		},
		close() {
			this.$emit('close');
		},
		// 手动保存
		toSave(url) {
			//#ifndef H5
			uni.getImageInfo({
				src: url,
				success: function (image) {
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: function () {
							uni.showToast({
								title: '海报已保存相册',
								icon: 'success',
								duration: 2000
							});
						}
					});
				}
			});
			//#endif
		}
	}
};
</script>

<style lang="scss" scoped>
.wanl-poster {
	&__canvas {
		margin: 0 auto;
	}

	&__main {
		position: relative;
		margin: 0 auto;
		width: 75%;
		padding-bottom: 60rpx;

		.image {
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			will-change: transform;
		}

		.close {
			position: absolute;
			top: 6rpx;
			right: 4rpx;

			.wlIcon {
				font-size: 46rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}
}
.guabnbi {
	text-align: center;
	font-size: 60rpx;
	color: #fff;
}
</style>
